<template lang="html">
  <section class="components-property-coupon_list">
    <div v-for="item in couponList" class="ticket" @click="$emit('selectCoupon', item.coupon_id)">
      <div class="ticketInfo">
          <h1>{{item.coupon_name}}</h1>
          <p>适用于所有课程</p>
      </div>
      <div class="ticketPrice">
          <h1 v-if="item.coupon_type == 1">
            ￥ {{item.coupon_counts}}
          </h1>
          <h1 v-if="item.coupon_type == 2">
            {{item.coupon_counts}} 折
          </h1>
          <p>{{stampToString(item.endTime)}}</p>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    couponList: {
      type: Array,
      required: true
    }
  },
  data(){
    return {

    }
  },
  methods: {
    stampToString(timestamp){
      if(timestamp == 0) return '永久有效'
      let time = new Date(timestamp*1000)
      return `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()}`
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../css/config";
.components-property-coupon_list{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 17px 0 27px 0;
  background-color: $common-black;
  .ticket{
    background-image: url("../../assets/image/coupon.png");
    background-size: cover;
    width: 670px;
    height: 163px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 32px 28px 17px 28px;
    box-sizing: border-box;
    margin-bottom: 10px;
    .ticketInfo{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      max-width: 57%;
      /*margin: 32px 0 17px 28px;*/
      h1{
        font-size: 36px;
        color: $common-red;
        @include text-overflow;
      }
      p{
        font-size: 24px;
        color: #494b47;
        @include text-overflow;
      }
    }
    .ticketPrice{
      text-align: right;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      max-width: 42%;
      /*margin: 32px 28px 17px 0;*/
      h1{
        font-size: 48px;
        color: $common-red;
      }
      p{
        font-size: 24px;
        color: $common-red;
      }
    }
  }
}

</style>
